
import '../../pages/App.css';
function Setting() {
  return (
    <div className="px-[15px] py-3 h-full overflow-hidden">
    <div className="flex flex-col overflow-hidden bg-primary-background dark:text-primary-text rounded-[20px] h-full">
      <div className="text-center border-b border-solid border-primary-border flex flex-col justify-center mx-10 py-3"><span
          className="font-semibold text-lg">设置 (v1.33.4)</span></div>
      <div className="px-10 h-full overflow-auto">
        <div className="flex flex-col gap-5 mt-3">
          <div>
            <p className="font-bold mb-1 text-lg">导出/导入数据</p>
            <p className="mb-3 opacity-80">数据包括所有设置、聊天记录和本地prompts</p>
            <div className="flex flex-row gap-3"><button type="button"
                className="rounded-full text-sm px-4 py-1 text-primary-text bg-secondary">
                <div className="flex flex-row items-center gap-1 min-w-max"><svg stroke="currentColor" fill="currentColor"
                    stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11 16h2V7h3l-4-5-4 5h3z"></path>
                    <path
                      d="M5 22h14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2h-4v2h4v9H5v-9h4V9H5c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2z">
                    </path>
                  </svg><span>导出</span></div>
              </button><button type="button" className="rounded-full text-sm px-4 py-1 text-primary-text bg-secondary">
                <div className="flex flex-row items-center gap-1 min-w-max"><svg stroke="currentColor" fill="currentColor"
                    stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <path d="m12 18 4-5h-3V2h-2v11H8z"></path>
                    <path
                      d="M19 9h-4v2h4v9H5v-9h4V9H5c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2z">
                    </path>
                  </svg><span>导入</span></div>
              </button></div>
          </div>
          <div className="flex flex-col gap-2">
            <p className="font-bold text-lg">打开ChatHub的快捷键</p>
            <div className="flex flex-row gap-2 items-center">
              <div className="flex flex-row gap-1"><kbd
                  className="px-2 py-1.5 text-sm font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">Alt+J</kbd>
              </div><button type="button" className="rounded-full text-sm px-4 py-1 text-primary-text bg-secondary">
                <div className="flex flex-row items-center gap-1 min-w-max"><span>修改快捷键</span></div>
              </button>
            </div>
          </div>
          <div>
            <p className="font-bold mb-2 text-lg">启动页面</p>
            <div className="w-[200px]">
              <div className="relative"><button
                  className="relative w-full cursor-default rounded-md bg-white pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none leading-6 text-sm py-1.5"
                  id="headlessui-listbox-button-:r1o:" type="button" aria-haspopup="listbox" aria-expanded="false"
                  data-headlessui-state=""><span className="block truncate">ChatGPT</span><span
                    className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                      className="h-5 w-5 text-gray-400">
                      <path fill-rule="evenodd"
                        d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                        clip-rule="evenodd"></path>
                    </svg></span></button></div>
            </div>
          </div>
          <div className="flex flex-col gap-2">
            <p className="font-bold text-lg">聊天机器人</p>
            <div className="flex flex-row gap-3 flex-wrap max-w-[700px]">
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-chatgpt" checked=""/><label
                  for="bot-checkbox-chatgpt" className="font-medium text-sm">ChatGPT</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-bing" checked=""/><label
                  for="bot-checkbox-bing" className="font-medium text-sm">Bing</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-bard" checked=""/><label
                  for="bot-checkbox-bard" className="font-medium text-sm">Bard</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-claude" checked=""/><label
                  for="bot-checkbox-claude" className="font-medium text-sm">Claude</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-llama" checked=""/><label
                  for="bot-checkbox-llama" className="font-medium text-sm">Llama 2</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-alpaca" checked=""/><label
                  for="bot-checkbox-alpaca" className="font-medium text-sm">Alpaca</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-vicuna" checked=""/><label
                  for="bot-checkbox-vicuna" className="font-medium text-sm">Vicuna</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-pi" checked=""/><label
                  for="bot-checkbox-pi" className="font-medium text-sm">Pi</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-chatglm" checked=""/><label
                  for="bot-checkbox-chatglm" className="font-medium text-sm">ChatGLM</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-xunfei" checked=""/><label
                  for="bot-checkbox-xunfei" className="font-medium text-sm">讯飞星火</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-oasst" checked=""/><label
                  for="bot-checkbox-oasst" className="font-medium text-sm">OpenAssistant</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-rwkv" checked=""/><label
                  for="bot-checkbox-rwkv" className="font-medium text-sm">ChatRWKV</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-guanaco" checked=""/><label
                  for="bot-checkbox-guanaco" className="font-medium text-sm">Guanaco</label></div>
              <div className="flex flex-row gap-[6px]"><input type="checkbox" id="bot-checkbox-wizardlm" checked=""/><label
                  for="bot-checkbox-wizardlm" className="font-medium text-sm">WizardLM</label></div>
            </div>
          </div>
          <div className="flex flex-col gap-1">
            <p className="font-bold text-lg">ChatGPT</p>
            <div className="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-3 mb-1">
              <div className="flex items-center"><input id=":r1p:" type="radio"
                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="webapp" checked=""/><label
                  for=":r1p:" className="ml-2 block text-sm font-medium leading-6">Webapp Mode</label></div>
              <div className="flex items-center"><input id=":r1q:" type="radio"
                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="api"/><label for=":r1q:"
                  className="ml-2 block text-sm font-medium leading-6">API Mode</label></div>
              <div className="flex items-center"><input id=":r1r:" type="radio"
                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="azure"/><label for=":r1r:"
                  className="ml-2 block text-sm font-medium leading-6">Azure Mode</label></div>
              <div className="flex items-center"><input id=":r1s:" type="radio"
                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="poe"/><label for=":r1s:"
                  className="ml-2 block text-sm font-medium leading-6">Poe Mode</label></div>
            </div>
            <div className="flex flex-col gap-1">
              <p className="font-medium text-sm">模型</p>
              <div className="w-[250px] mb-1">
                <div className="relative"><button
                    className="relative w-full cursor-default rounded-md bg-white pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none leading-6 text-sm py-1.5"
                    id="headlessui-listbox-button-:r1t:" type="button" aria-haspopup="listbox" aria-expanded="false"
                    data-headlessui-state=""><span className="block truncate">GPT-4</span><span
                      className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                        className="h-5 w-5 text-gray-400">
                        <path fill-rule="evenodd"
                          d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                          clip-rule="evenodd"></path>
                      </svg></span></button></div>
              </div>
              <p className="text-sm text-secondary-text">ChatGPT Plus账号可使用</p>
            </div>
          </div>
          <div className="flex flex-col gap-1">
            <p className="font-bold text-lg">Claude</p>
            <div className="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-3 mb-1">
              <div className="flex items-center"><input id=":r1u:" type="radio"
                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="poe" checked=""/><label
                  for=":r1u:" className="ml-2 block text-sm font-medium leading-6">Poe Mode</label></div>
              <div className="flex items-center"><input id=":r1v:" type="radio"
                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="api"/><label for=":r1v:"
                  className="ml-2 block text-sm font-medium leading-6">API Mode</label></div>
              <div className="flex items-center"><input id=":r20:" type="radio"
                  className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="webapp"/><label
                  for=":r20:" className="ml-2 block text-sm font-medium leading-6">Webapp Mode</label></div>
            </div>
            <div className="flex flex-col gap-1">
              <p className="font-medium text-sm">模型</p>
              <div className="w-[250px] mb-1">
                <div className="relative"><button
                    className="relative w-full cursor-default rounded-md bg-white pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none leading-6 text-sm py-1.5"
                    id="headlessui-listbox-button-:r21:" type="button" aria-haspopup="listbox" aria-expanded="false"
                    data-headlessui-state=""><span className="block truncate">claude-instant</span><span
                      className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                        className="h-5 w-5 text-gray-400">
                        <path fill-rule="evenodd"
                          d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                          clip-rule="evenodd"></path>
                      </svg></span></button></div>
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-1">
            <p className="font-bold text-lg">Bing</p>
            <div className="flex flex-row gap-3 items-center justify-between w-[250px]">
              <p className="font-medium text-base">会话风格</p>
              <div className="w-[150px]">
                <div className="relative"><button
                    className="relative w-full cursor-default rounded-md bg-white pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none leading-6 text-sm py-1.5"
                    id="headlessui-listbox-button-:r22:" type="button" aria-haspopup="listbox" aria-expanded="false"
                    data-headlessui-state=""><span className="block truncate">Balanced</span><span
                      className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                        className="h-5 w-5 text-gray-400">
                        <path fill-rule="evenodd"
                          d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                          clip-rule="evenodd"></path>
                      </svg></span></button></div>
              </div>
            </div>
          </div>
        </div><button type="button"
          className="rounded-full text-base font-medium px-6 py-[5px] text-primary-text bg-secondary w-fit my-8">
          <div className="flex flex-row items-center gap-1 min-w-max"><span>保存</span></div>
        </button>
        <div style={{position: "fixed", zIndex: 9999, inset: "16px", pointerEvents: "none"}}></div>
      </div>
    </div>
  </div>
  );
}

export default Setting;
